<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>广告位分类管理</title>
		<link href="plugin/date/date.css" rel="stylesheet">
		<link href="bootstrap/css/bootstrap3.min.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-filestyle.min.js"></script>
		<link rel="stylesheet" href="css/nav.css" />
		<style>
			.form-group-update {
				margin-right: 2%;
			}
			li {list-style: none}
			.imgsBox  {display: block;}
			.imgsBox img{ width: 35px; height: 35px;}
			.bannerBox li {border-bottom: 1px solid #f7f7f7; padding: 10px 0;}

		</style>
	</head>
	<body>
		<!--导航-->
	    <nav class="navbar navbar-inverse">
	      <div class="container-fluid">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
		          	<a class="navbar-brand" href=""><img src="images/admin_logo.png" alt=""></a>
	        </div>

	        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
	          <ul class="nav navbar-nav" id="nav">

	          </ul>
	          <ul class="nav navbar-nav navbar-right">
	            <li class="dropdown">
	              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">欢迎您：<span id="uname"></span><span class="caret"></span></a>
	              <ul class="dropdown-menu" role="menu">
	                <li><a href="change_pass.html">修改密码</a></li>
	                <li><a id="loginOut" href="#">退出登陆</a></li>
	              </ul>
	            </li>
	          </ul>
	        </div>
	      </div>
	    </nav>
		<div class="container-fluid">
			<div class="row bcert-box">
				<ol class="breadcrumb">
				  <li><a href="javascript:;">主页</a></li>
				  <li>网站设置</li>
				  <li class="active">广告位分类管理</li>
				</ol>
				<!-- <button type="button" class="btn btn-primary btn-success" data-toggle="modal" id="addBtn" data-target=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;添加管理员账号</button> -->
				<div class="table">
		          	<table class="table table-bordered table-striped" id="integralList">

		          	</table>
		        </div>
				<!-- 分页 -->
		        <nav aria-label="...">
		            <div class="">
		            	<span id="pageNum">共&nbsp;<strong></strong>&nbsp;页&nbsp;/&nbsp;</span><span id="totalNum">&nbsp;<strong>0</strong>&nbsp;条数据</span>
		            </div>
		            <ul id="example"></ul>
		        </nav>
		    </div>
		</div>

		<div class="modal fade" tabindex="-1" id="editRole" role="dialog" aria-labelledby="">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
						</button>
							<h4 class="modal-title" id="myLargeModalLabel">详细</h4>
					</div>
					<div class="modal-body" style="overflow:auto">
						 <div class="form-group">
							 <label class="col-sm-2 control-label goods-lb-l">首页类型名称</label>
							 <div class="col-sm-10 goods-lb-r">
								 <input type="text" class="form-control" readonly="readonly" id="tName" placeholder="类型名称">
							 </div>
						 </div>
						 <div class="form-group">
						    <!-- <label class="col-sm-2 control-label goods-lb-l">广告图片</label> -->
							    <div class="col-sm-12 goods-lb-r">
									<ul class="row bannerListType">
										<li class="col-sm-2 bannerTitle"  style="padding-left:0">图片预览</li>
										<li class="col-sm-1 imgTitle"  style="padding:0">查看图片</li>
										<li class="col-sm-2"  style="padding-left:0">广告类型</li>
										<li class="col-sm-2"  style="padding-left:0">类型值</li>
										<li class="col-sm-1"  style="padding-left:0">权重</li>
										<li class="col-sm-2"  style="padding-left:0">banner名称</li>
										<li class="col-sm-2"  style="padding-left:0">操作</li>
									</ul>
							        <ul class="bannerBox">

							        </ul>
							        <p id="sizeText"></p>
							    </div>
							</div>
					</div>
					<!-- <div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" id="entBtns">确认提交</button>
					</div> -->
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<div class="modal fade" tabindex="-1" id="addBannerBox" role="dialog" aria-labelledby="">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
						</button>
							<h4 class="modal-title" id="myLargeModalLabel">添加banner</h4>
					</div>
					<div class="modal-body" style="overflow:auto">
						 <div class="form-group">
									<ul class="row">
										<li class="col-sm-2 bannerTitle1"  style="padding-left:0">图片预览</li>
										<li class="col-sm-1 imgTitle1"  style="padding:0">查看图片</li>
										<li class="col-sm-2"  style="padding-left:0">广告类型</li>
										<li class="col-sm-2"  style="padding-left:0">类型值</li>
										<li class="col-sm-2"  style="padding-left:0">banner名称</li>
										<li class="col-sm-1"  style="padding-left:0">权重</li>
										<li class="col-sm-2"  style="padding-left:0">操作</li>
									</ul>
							        <ul class="bannerBox1">
							            <li class="row">
							                <form enctype="multipart/form-data" class="imgForm col-sm-2 bannerBox2" style="padding-left:0">
							                    <input type="file" name="file" onchange="imgup(this,$(this).parent())" class="input04" id="filestyle-1" tabindex="-1" style="position: absolute; clip: rect(0px 0px 0px 0px);">
							                    <input type="hidden" name="imgPath" value="banner">
							                </form>
							                <div class="imgsBox col-sm-1 imgBox2" style="padding:0">

							                </div>
											<div class="col-sm-2" style="padding-left:0">
												<select class="form-control drop-down" name="operationType" id="acId">

												</select>
											</div>
							                <div class="col-sm-2" style="padding-left:0">
							                    <input type="text" class="form-control articleId" data-id="" id="typeVal" value="" placeholder="类型值">
							                </div>
											<div class="col-sm-2" style="padding-left:0">
							                    <input type="text" class="form-control articleId" data-id="" id="bannerName" value="" placeholder="banner名称">
							                </div>
											<div class="col-sm-1" style="padding-left:0">
							                    <input type="text" class="form-control articleId" data-id=""  id="weight" value="" placeholder="权重">
							                </div>
							                <div class="col-sm-2" style="padding-left:0;">
												<button type="button" class="btn btn-primary btn-primary btn-sm addBannerBtn" style="margin-top:6px;">确认添加</button>
							                </div>
							            </li>
							        </ul>
							        <p id="sizeBox2"></p>
							</div>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
	</body>
</html>
<script type="text/javascript" src="plugin/layer/layer.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
 <script type="text/javascript" src="js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script>
	$('.input04').filestyle({
		htmlIcon : '<span class="oi oi-folder"></span> ',
		text: '预览',
		btnClass : 'btn-primary'
	});

	$(document).ready(function() {
		tableList()
	});
	var pageUrls =  serverURL + '/EwHome/queryAllEwHome';
	var permissionsUrls  = ''
	//分页
    function tableList(){
  	  data = {
  		  'page': page,
  		  'pageSize': pagesize
  	  }
  	  data.page = 1
  	  ajax(
  		  pageUrls,
  		  data,
  		  pageNumList,
  		  'post',
  		  'json'
  	  )
    }
	//数据渲染
    function OpendList(res){
      var result = '';
      $('#integralList').empty();
      $('#integralList').append(
        '<tr>' +
        '<th>广告位id</th>' +
        '<th>广告位名称</th>' +
		'<th>banner图尺寸</th>' +
		'<th>图片数量</th>' +
		'<th>操作</th>' +
    	'</tr>'
      );
		for (var i = 0; i < res.data.list.length; i++) {
			result +=
	           	'<tr>'+
	            '<td class="idBox">'+ res.data.list[i].homeId +'</td>'+
	            '<td class="typeNameBox">'+ res.data.list[i].typeName +'</td>'+
				'<td class="sizeBox">'+ res.data.list[i].w +'</td>'+
				'<td>'+ res.data.list[i].num +'</td>'+
		   		'<td class="text-center"><button type="button" data-id="'+ res.data.list[i].homeId +'" class="btn btn-primary btn-sm editBannerBtn" data-toggle="modal" data-target=".bs-example-modal-lg">编辑</button>&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-sm btn-success addBanner"  data-id="'+ res.data.list[i].homeId +'" data-toggle="modal" data-target=".bs-example-modal-lg">新增</button></td>'+
	            '</td></tr>'
		}
      $('#integralList').append(result)
    }
	//删除
	function delBanners(id){
		layer.confirm('确定要删除吗？', {
			btn: ['确认','取消'] //按钮
		}, function(){
			var data = {
				'homeDetailsIds':id
			}
			var cbk = function(){
				$('#editRole').modal('hide')
			}
			ajax(
	    		serverURL + '/EwHomeDetails/deleteByHomeDetailsId',
	    		data,
	    		cbk,
	    		'post',
	    		'json'
	    	)
		}, function(){
		});

	}

	//新增
	$(document).on('click','.addBanner',function() {
		$('#addBannerBox').modal();
		pid = $(this).attr('data-id')
		$('.addBannerBtn').attr('data-id',pid)
		var idBox = $(this).parent().siblings('.idBox').html()
		var size = $(this).parent().siblings('.sizeBox').html()
		$('#sizeBox2').html(size);
		if(idBox == 6){
			$('#acId').html(
				'<option value="4">商品id</option>'
			)
			$('.bannerTitle1').hide()
			$('.imgTitle1').hide()
			$('.bannerBox2').hide()
			$('.imgBox2').hide()
		}else{
			$('#acId').html(
				'<option value="1">外链</option><option value="2">关键字</option><option value="3">分类id</option><option value="4">商品id</option>'
			)
			$('.bannerTitle1').show()
			$('.imgTitle1').show()
			$('.bannerBox2').show()
			$('.imgBox2').show()
		}
	})

	function particulars(id,typeName,size){
		$('.bannerBox').empty();
		var data = {
			'homeId':id
		};
		var html ='';
		var cbk = function(res){
			$('#sizeText').html('banner图大小：'+size)
			$('#tName').val(typeName)
			for (var i = 0; i < res.data.list.length; i++) {
				html += '<li class="row">'
						if (res.data.list[i].homeId != 6) {
							$('.bannerTitle').show()
							$('.imgTitle').show()
							html +='<form enctype="multipart/form-data" class="imgForm col-sm-2" style="padding-left:0">'+
							'<input type="file" name="file" onchange="imgup(this,$(this).parent())" class="input04" tabindex="-1" style="position: absolute; clip: rect(0px 0px 0px 0px);">'+
							'<input type="hidden" name="imgPath" value="banner">'+
							'</form>'+
							'<div class="imgsBox col-sm-1" style="padding:0">'+
							'<img class="img-thumbnail" src="'+ res.data.list[i].imageUrl+'" alt="">'+
							'<input type="hidden" name="" value="'+ res.data.list[i].imageUrl+'" class="imgName">'+
							'</div>'
						}else{
							$('.bannerTitle').hide()
							$('.imgTitle').hide()
						}
						if (res.data.list[i].homeId == 6) {
							html +='<div class="col-sm-2 typeBox" style="padding-left:0">'+
							'<select class="form-control drop-down typeInfo" name="typeInfo" data-id="'+ res.data.list[i].type+'">'+
							'<option value="4">商品id</option>'+
							'</select></div>'
						}else {
							html +='<div class="col-sm-2 typeBox" style="padding-left:0">'+
							'<select class="form-control drop-down typeInfo" name="typeInfo" data-id="'+ res.data.list[i].type+'">'+
							'<option value="1">外链</option>'+
							'<option value="2">关键字</option>'+
							'<option value="3">分类id</option>'+
							'<option value="4">商品id</option>'+
							'</select></div>'
						}
						html +='<div class="col-sm-2 textBox" style="padding-left:0">'+
						'<input type="text" class="form-control articleId text" data-id="" value="'+ res.data.list[i].text +'" placeholder="类型值">'+
						'</div>'+
						'<div class="col-sm-1 sortBox" style="padding-left:0">'+
						'<input type="text" class="form-control articleId sort" data-id="" value="'+ res.data.list[i].sort +'" placeholder="权重">'+
						'</div>'+
						'<div class="col-sm-2 nameBox" style="padding-left:0">'+
						'<input type="text" class="form-control articleId goodsName" data-id="" value="'+ res.data.list[i].goodsName +'" placeholder="banner名称">'+
						'</div>'+
						'<div class="col-sm-2" style="padding-left:0;">'+
						'<button type="button" class="btn btn-primary btn-danger btn-sm delBanner" onclick="delBanners('+ res.data.list[i].homeDetailsId +',this)" style="margin-top:6px;">删除</button>&nbsp;&nbsp;&nbsp;'+
						'<button type="button" class="btn btn-primary btn-primary btn-sm editBanner" homeId="'+ res.data.list[i].homeId +'" data-id="'+ res.data.list[i].homeDetailsId +'" style="margin-top:6px;">修改</button>'+
						'</div>'+
						'</li>'

			}
			$('.bannerBox').append(html)
			$('.typeInfo').each(function(index) {
				var _this = $(this)
				var val = _this.attr('data-id')
				_this.val(val);
			});

			$('.input04').filestyle({
				htmlIcon : '<span class="oi oi-folder"></span> ',
				text: '预览',
				btnClass : 'btn-primary'
			});
		}
		ajax(
			serverURL + '/EwHomeDetails/queryAllEwHomeDetails',
			data,
			cbk,
			'post',
			'json'
		)
	}

	//编辑
	$(document).on('click', '.editBannerBtn', function() {
		var id = $(this).attr('data-id');
		var typeName = $(this).parent().siblings('.typeNameBox').html()
		var size = $(this).parent().siblings('.sizeBox').html()
		$('#editRole').modal();
		particulars(id,typeName,size)
	})
	$(document).on('click', '.editBanner', function() {
		var id = $(this).attr('data-id')
		var homeId = $(this).attr('homeId')
		var imageUrl = $(this).parent().siblings('.imgsBox').find('.imgName').val();
		var text = $(this).parent().siblings('.textBox').find('.text').val();
		var type = $(this).parent().siblings('.typeBox').find('.typeInfo').val();
		var sort = $(this).parent().siblings('.sortBox').find('.sort').val();
		var goodsName = $(this).parent().siblings('.nameBox').find('.goodsName').val();
		var data = {
			'homeDetailsId':id,
			'type':type,
			'homeId':homeId,
			'goodsName':goodsName,
			'text':text,
			'imageUrl':imageUrl,
			'sort':sort
		}
		var cbk = function(res){
			// $('#editRole').modal('hide');
		}
		ajax(
			serverURL + '/EwHomeDetails/updateByHomeDetailsId',
			data,
			cbk,
			'post',
			'json'
		)
	})

	//添加
	$('.addBannerBtn').click(function(){
		var homeId = $(this).attr('data-id')
		var imageUrl = $(this).parent().siblings('.imgsBox').find('.imgName').val();
		var data = {
			'type':$('#acId').val(),
			'homeId':homeId,
			'text':$('#typeVal').val(),
			'goodsName':$('#bannerName').val(),
			'imageUrl':imageUrl,
			'sort':$('#weight').val()
		}
		var callback = function(res){
			$('#editRole').modal('hide')
			tableList()
		}
		ajax(
			serverURL + '/EwHomeDetails/saveEwHomeDetails',
			data,
			callback,
			'post',
			'json',
			false
		)
	})

	$('#addBannerBox').on('hidden.bs.modal', function (e) {
		$('#acId').val('1')
		$("div[name='filedrag']").next('input').val('')
		$("input[name='file']").val('')
		$('.imgName').val('')
		$('#typeVal').val('')
		$('#bannerName').val('')
		$('#imgNameVal').val('')
		$('#weight').val('')
		$('.imgBox2').html('')
	})
	//图片上传
	function imgup(upImg,ADD) {
		var datas = new FormData(ADD[0]);
		var size = upImg.files[0].size;//得到图片的大小
		var trueSize = Math.ceil(size/1024);//把字节转换成kb
		if (trueSize > 2048) {
			alert("请上传小于2M的图片")
			return false;
		}
		var fileImg = upImg.files[0].name;            //图片名
		var extStart=fileImg.lastIndexOf(".");
		var ext=fileImg.substring(extStart,fileImg.length).toUpperCase();
		if (ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG") {
			alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
			return false;
		};
		console.log(datas)
		$.ajax({
		 url: serverURL + '/platform/getOssUpload',
		 type: "post",
		 dataType: "json",
		 cache: false,
		 contentType: false,
		 processData: false,
		 data:datas,
		 xhrFields: {
		 	withCredentials: true
	 	},
	 	success: function (data) {
		 	if (data.code == 200) {
				// 	var srcs = getObjectURL(upImg.files[0]);
				// $(upImg).val(data.data)
				var src = data.data
				$(upImg).parent().next('.imgsBox').html('<img class="img-thumbnail" src="'+ src +'" alt=""><input type="hidden" name="" value="'+ src +'" class="imgName">')
		 	}
		}
	 });
	 return false
	}
</script>
